/**
 * =======================================================================
 * Search Form Styles - 搜索表单样式
 * =======================================================================
 *
 * 这个文件包含了搜索表单的样式，包括：
 * - 搜索容器布局
 * - 搜索字段样式
 * - 响应式搜索布局
 * - 搜索按钮样式
 *
 * @version 1.0.0
 * @author Anypay Team
 * =======================================================================
 */

/* =======================================================================
   1. CSS变量定义
   ======================================================================= */

/**
 * CSS变量定义 - 基础尺寸
 */
:root {
  /* 基础尺寸 */
  --search-base-font: 14px;
  --search-base-input: 140px;
  --search-base-input-small: 110px;
  --search-base-select: 140px;
  --search-base-select-large: 180px;
  --search-base-date-range: 220px;

  /* 密度系数 */
  --search-standard-scale: 1;
  --search-compact-scale: 0.92;
  --search-ultra-compact-scale: 0.85;

  /* 屏幕尺寸系数 */
  --search-screen-scale: 1;
}

/* =======================================================================
   2. 搜索容器样式
   ======================================================================= */

/**
 * 搜索容器基础样式
 */
.search-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 12px 0;
}

/**
 * 密度级别设置 - 使用固定gap值确保可靠性
 */
.search-container.standard {
  --search-density-scale: var(--search-standard-scale);
  --search-font-scale: 1;
  gap: 16px; /* 标准间距 */
}

.search-container.compact {
  --search-density-scale: var(--search-compact-scale);
  --search-font-scale: 0.93;
  gap: 14px; /* 紧凑间距 */
}

.search-container.ultra-compact {
  --search-density-scale: var(--search-ultra-compact-scale);
  --search-font-scale: 0.93;
  gap: 12px; /* 超紧凑间距 */
}

/* =======================================================================
   3. 搜索字段样式
   ======================================================================= */

/**
 * 搜索字段容器
 */
.search-field {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/**
 * 搜索标签统一样式
 */
.search-label {
  font-size: calc(var(--search-base-font) * var(--search-font-scale, 1) * var(--search-screen-scale));
  font-weight: 500;
  color: #424245;
  margin: 0;
  min-width: fit-content;
}

/**
 * 统一组件高度
 */
.search-input,
.search-input-small,
.search-select,
.search-select-large,
.search-date-range,
.search-btn {
  height: 32px;
}

/**
 * 输入框尺寸 - 使用计算值
 */
.search-input {
  width: calc(var(--search-base-input) * var(--search-density-scale, 1) * var(--search-screen-scale));
}

.search-input-small {
  width: calc(var(--search-base-input-small) * var(--search-density-scale, 1) * var(--search-screen-scale));
}

/**
 * 选择框尺寸 - 使用计算值
 */
.search-select {
  width: calc(var(--search-base-select) * var(--search-density-scale, 1) * var(--search-screen-scale));
}

.search-select-large {
  width: calc(var(--search-base-select-large) * var(--search-density-scale, 1) * var(--search-screen-scale));
}

/**
 * 时间范围选择器尺寸
 */
.search-date-range {
  width: calc(var(--search-base-date-range) * var(--search-density-scale, 1) * var(--search-screen-scale));
}

/* =======================================================================
   4. 搜索按钮样式
   ======================================================================= */

/**
 * 操作按钮区域
 */
.search-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/**
 * 搜索按钮统一样式
 */
.search-btn {
  padding: 0 16px;
  font-weight: 500;
  font-size: calc(var(--search-base-font) * var(--search-font-scale, 1) * var(--search-screen-scale));
}

/* =======================================================================
   5. 搜索区域响应式设计
   ======================================================================= */

/**
 * 超大屏 (1900px+) - 放大1.15倍，调整间距
 */
@media (min-width: 1900px) {
  :root {
    --search-screen-scale: 1.15;
  }

  .search-container.standard { gap: 20px; }
  .search-container.compact { gap: 18px; }
  .search-container.ultra-compact { gap: 16px; }
}

/**
 * 大屏 (1600px-1899px) - 放大1.08倍，调整间距
 */
@media (min-width: 1600px) and (max-width: 1899px) {
  :root {
    --search-screen-scale: 1.08;
  }

  .search-container.standard { gap: 18px; }
  .search-container.compact { gap: 16px; }
  .search-container.ultra-compact { gap: 14px; }
}

/**
 * 中等屏幕 (1200px-1400px) - 缩小到0.85倍，调整间距
 */
@media (max-width: 1400px) and (min-width: 1200px) {
  :root {
    --search-screen-scale: 0.85;
  }

  .search-container.standard { gap: 12px; }
  .search-container.compact { gap: 10px; }
  .search-container.ultra-compact { gap: 8px; }
}

/**
 * 小屏幕 (768px-1199px) - 缩小到0.72倍，调整间距
 */
@media (max-width: 1199px) and (min-width: 768px) {
  :root {
    --search-screen-scale: 0.72;
  }

  .search-container.standard { gap: 10px; }
  .search-container.compact { gap: 8px; }
  .search-container.ultra-compact { gap: 6px; }
}

/**
 * 移动端 (最大768px) - 垂直布局
 */
@media (max-width: 768px) {
  .search-container.standard,
  .search-container.compact,
  .search-container.ultra-compact {
    flex-direction: column;
    align-items: stretch;
    gap: 12px !important;
  }

  .search-field {
    justify-content: space-between;
  }

  .search-label {
    min-width: 90px;
    font-size: 14px !important;
  }

  .search-input,
  .search-input-small,
  .search-select,
  .search-select-large,
  .search-date-range {
    width: 200px !important;
    flex: 1;
  }

  .search-actions {
    justify-content: center;
    gap: 12px;
  }
}

/* =======================================================================
   6. 全局下拉框宽度优化
   ======================================================================= */

/* 全局下拉框宽度优化 - 确保中文内容完整显示 */
.search-container .search-select-large {
  width: 180px !important;  /* 商户类型、支付方式等长选项 */
}

.search-container .search-select {
  width: 140px !important;  /* 状态、通道等标准选项 */
}